import React, { Component } from 'react'
import { ClassProps, FunctionProps } from './components/PropsTest'

/* 
props的使用:
1. 父组件传递: 组件标签属性
  父组件中: <Child  xxx={value} yyy={value2}>
2. 子组件读取
  类组件: 父组件传递过来的属性进入组件对象的props对象中
      this.props.xxx/yyy
  函数组件: 组件函数接收的参数就是包含属性的props对象
      通过参数props读取  props.xxx/yyy
3. 更新
  父组件: 通过setState更新传递过去的数据  => 子组件也会自动更新
  子组件: 只能读取props显示, 不能更新
*/
export default class App extends Component {

  state = {
    person: {
      name: 'tom',
      age: 12
    }
  }

  render() {
    const person = this.state.person

    return (
      <div>
        <h2>App: {person.name}--{person.age}</h2>
        <button onClick={() => this.setState({
          person: {name: 'jack', age: 21}
        })}>更新</button>
        <hr/>
        <ClassProps name={person.name} age={person.age}></ClassProps>
        <FunctionProps name2={person.name} age2={person.age}></FunctionProps>
      </div>
    )
  }
}
